<template>
	<view class="container">
		<view class="header swiper-banner">
			<swiper class="swiper-banner" display-multiple-items="4" next-margin="50rpx">
				<swiper-item>
					<view class="item">
						<view class="score">{{ wanlshopObj.score_attitude || 0 }}</view>
						<wanl-rate :size="10" :current="Number(wanlshopObj.score_attitude)" :disabled="true"></wanl-rate>
						<view class="title">态度分</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="item">
						<view class="score">{{ wanlshopObj.score_skill || 0 }}</view>
						<wanl-rate :size="10" :current="Number(wanlshopObj.score_skill)" :disabled="true"></wanl-rate>
						<view class="title">技能分</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="item">
						<view class="score">{{ wanlshopObj.score_environment || 0 }}</view>
						<wanl-rate :size="10" :current="Number(wanlshopObj.score_environment)" :disabled="true"></wanl-rate>
						<view class="title">环境分</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- wanlshopObj -->

		<view class="content margin-bottom-bj">
			<view class="tag-list solid-bottom margin-bottom-sm padding-bottom-sm">
				<view class="item" :class="index == selectTag? 'active': ''" v-for="(item,index) in tagList"
				style="background-color: #f6efe9;"
					:key="index" @tap="handle_tag(index,item.tag)">{{item.title}}({{item.num}})</view>
			</view>
			<!-- 评论卡片 -->
			<view class="list radius-bock" v-for="(item, index) in commentList" :key="item.id">
				<view class="comment solid-bottom margin-bottom-sm">
					<!-- 用户信息 -->
					<view class="userinfo flex justify-between margin-bottom-sm">
						<view class="avatar flex">
							<view class="cu-avatar round margin-right-sm"
								:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.user.avatar, 35, 35, 2, 'avatar') + ')' }">
							</view>
							<view class="text-sm">
								<view>{{ item.user.nickname }}</view>
								<wanl-rate :size="9" :current="item.score" :disabled="true" />
							</view>
						</view>
						<view class="text-gray" style="font-size: 22rpx;">{{ $wanlshop.timeToDate(item.createtime) }}
						</view>
					</view>

					<!-- 评论详情 -->
					<view class="details margin-bottom-xs">
						<view class="margin-bottom-sm">{{ item.store_content || '' }}</view>
						<view class="text-gray text-sm">购买：{{ item.suk }}</view>
					</view>
					<view class="grid flex-sub grid-square margin-bottom-xs" v-if="item.images.length"
						:class="[item.images.length > 3 ? 'col-3' : 'col-' + item.images.length]">
						<view class="bg-img" style="margin-bottom: unset;" v-for="(image, tagInd) in item.images"
							:key="tagInd" @tap="previewImage(item.images, tagInd)"
							:style="{ backgroundImage: 'url(' + $wanlshop.oss(image, 248, 0) + ')' }"></view>
					</view>
				</view>
			</view>
			<view v-if="commentList && commentList.length == 0">
				<wanl-empty text="暂无评价"/>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				// 标签列表
				tagList: [{
					title: '全部评论',
					tag: 'total',
					num: 0
				}, {
					title: '好评',
					tag: 'good',
					num: 0
				}, {
					title: '中评',
					tag: 'pertinent',
					num: 0
				}, {
					title: '差评',
					tag: 'poor',
					num: 0
				},{
					title: '有图',
					tag: 'figure',
					num: 0
				}],
				// 当前选择标签
				selectTag: 0,
				// 评论列表
				commentList: [],
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				goods_id: 1, //商品ID
				tag: '', //查询的标签
				tagData: [], //标签数据
				statisticsData: {
					rate: 0,
					good: 0,
					pertinent: 0,
					poor: 0,
					figure: 0
				}, //统计
				wanlshopObj: []
			};
		},
		computed: {
			...mapState(['common', 'user', 'update']),
		},
		onLoad(options) {
			// console.log(options,'options')
		   this.shop_id = options.ids
		   this.loadData("");
		   this.getStoreComments(options)
		},
		methods: {
			// 点击标签
			 handle_tag(index,tag) {
				console.log(index,tag,'刚刚加的  data')
				this.selectTag = index;
				 this.loadData(tag)
			},
			getStoreComments (option) {
				this.$api.get({
					url: '/wanlshop/store/storeCommentsSummary',
					data: {
						store_id: option.ids
					},
					success: res => {
						// console.log(res,'刚刚加的  data')
						this.wanlshopObj = res
						
						this.tagList = [{
							title: '全部评论',
							tag: '',
							num: res.total
						}, {
							title: '好评',
							tag: 'good',
							num: res.good
						}, {
							title: '中评',
							tag: 'pertinent',
							num: res.pertinent
						}, {
							title: '差评',
							tag: 'poor',
							num: res.poor
						},{
							title: '有图',
							tag: 'figure',
							num: res.figure
						}]
					}
				});
			},
			//加载评论
			async loadData(tag) {
				console.log(tag,'加载评论')
				this.$api.get({
					url: '/wanlshop/store/storeComments',
					data: {
						// id: this.goods_id,
						// page: this.current_page,
						// tag: this.tag
						store_id: this.shop_id,
						tag
					},
					success: res => {
						uni.stopPullDownRefresh();
						// this.commentList = this.reload ? res.comment.data : this.commentList.concat(res
						// 	.comment.data); //评论数据 追加
						// this.total = res.comment.total; //数据量
						// this.current_page = res.comment.current_page; //当前页码
						// this.last_page = res.comment.last_page; //总页码
						// this.statisticsData = res.statistics; // 统计数据
						// this.tagData = res.tag; //标签数据
						// this.status = res.comment.total == 0 ? 'noMore' : 'more';
						
						this.commentList = res.data || []
						this.score_attitude = res.data[0].score_attitude
						this.score_skill = res.data[0].score_skill
						this.score_environment = res.data[0].score_environment
						console.log('this.commentList', res)
						
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $page-color-base;
	}

	.container {
		padding: 20rpx;

		.header {
			margin-bottom: 30rpx;

			.swiper-banner {
				height: 182rpx;

				swiper-item {
					padding: 0 10rpx;
					box-sizing: border-box;

					.item {
						height: 182rpx;
						background-color: white;
						display: flex;
						flex-direction: column;
						border-radius: 12rpx;
						align-items: center;
						gap: 15rpx;
						padding: 18rpx 0;
						box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);

						.score {
							font-size: 40rpx;
							font-weight: 400;
						}

						.title {
							font-size: 26rpx;
						}
					}
				}
			}
		}

		.content {
			width: 100%;
			background-color: white;
			border-radius: 24rpx;
			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
			padding: 30rpx;

			.tag-list {
				width: 100%;
				display: flex;
				gap: 16rpx;
				flex-wrap: wrap;

				.item {
					font-size: 24rpx;
					flex-shrink: 0;
					color: #3D3D3D;
					background-color: #F3F3F3;
					padding: 4rpx 14rpx;
					border-radius: 782rpx;
					width: fit-content;

					&.active {
						background-color: #FD7601 !important;
						color: white;
					}
				}
			}

			.list {
				background-color: transparent;

				// 评论
				.comment {
					background-color: white;
					padding: 20rpx;
					border-radius: 18rpx;
					font-size: 26rpx;
					// margin-bottom: 22rpx;
				}
			}
		}
	}
</style>